forum

home / developersection / forums / how to animate div down to up in jquery?

Ask Question

How to animate div down to up in jquery?

Anonymous User 2530 11-Mar-2015

Hi I’m making menu in footer

This is my code

CSS:

<style>
    footer {
        width: 100%;
        position: fixed;
        bottom: 0px;
    }
 
        footer ul li {
            float: left;
            list-style: none;
            background: none repeat scroll 0 0 #cfcfcf;
            width: 16.66%;
            text-align: center;
            padding: 8px 0;
            border: 1px solid #bbb;
        }
 
            footer ul li:hover {
                background: none repeat scroll 0 0 #f90;
            }
 
    #first,#second,#third,#fourth,#fifth,#six {
        position: absolute;
        background: none repeat scroll 0 0 #cfcfcf;
        width: 100%;
        min-height: 320px;
        left: 0;
        bottom: -300px;
        display:none;
    }
</style>

HTML:

<div id="first">
    <h2>News</h2>
</div>
<div id="second">
    <h2>Media</h2>
</div>
<div id="third">
    <h2>Watch</h2>
</div>
<div id="fourth">
    <h2>Connect</h2>
</div>
<div id="fifth">
    <h2>Newsletter</h2>
</div>
<div id="six">
    <h2>Subscribe</h2>
</div>
<footer>
    <ul class="list-unstyled list-inline">
        <li id="news">News Update</li>
        <li id="media">Media Coverage</li>
        <li id="watch">Watch Live</li>
        <li id="connect">Connect With me</li>
        <li id="gallery">Newsletter Gallery</li>
        <li id="subscribe">Subscribe to Newsletter</li>
    </ul>
</footer>

JQuery:

<script>
    $(document).ready(function () {
        $("#news").hover(function () {
            $("#first").css('bottom', '0' );
            $("#first").css("display","block");
        }, function () {
            $("#first"). css('bottom', '-300px' );
            $("#first").css("display", "none");
        });
        $("#media").hover(function () {
            $("#second"). css('bottom', '0' );
            $("#second").css("display", "block");
        }, function () {
            $("#second"). css('bottom', '-300px' );
            $("#second").css("display", "none");
        });
        $("#watch").hover(function () {
            $("#third"). css('bottom', '0' );
            $("#third").css("display", "block");
        }, function () {
            $("#third"). css('bottom', '-300px' );
            $("#third").css("display", "none");
        });
        $("#connect").hover(function () {
            $("#fourth"). css('bottom', '0' );
            $("#fourth").css("display", "block");
        }, function () {
            $("#fourth"). css('bottom', '-300px' );
            $("#fourth").css("display", "none");
        });
        $("#gallery").hover(function () {
            $("#fifth"). css('bottom', '0' );
            $("#fifth").css("display", "block");
        }, function () {
            $("#fifth"). css('bottom', '-300px' );
            $("#fifth").css("display", "none");
        });
        $("#subscribe").hover(function () {
            $("#six"). css('bottom', '0' );
            $("#six").css("display", "block");
        }, function () {
            $("#six"). css('bottom', '-300px' );
            $("#six").css("display", "none");
        });
    });
</script>
javascript jquery  jquery selectors 
Updated on 12-Mar-2015
Anonymous User

Other

I am a content writter !

Follow Message
Can you answer this question?
Answer

2 Answers

Anonymous User

Anonymous User

12-Mar-2015
This is perfect Code for animation div

CSS:


<style>
    body,ul {margin:0;
          padding:0;
    }
    .ft {
        position:fixed;
        bottom:0;
        width:100%;
    }
    .ft ul li{
        padding:8px 0;
        width:49%;
        border:1px solid #bbb;
        background-color:#ddd;
        display:inline-block;
    }
    .mind,.soft {
        display:none;
        width:100%;
        height:280px;
        background-color:#ddd;
        position:absolute;
        left: 0;
        bottom: -300px;
    }
</style>

 

JQuery:
$(document).ready(function () {
 
    $("#first").hover(function () {
        $(".mind").show();
        $(".mind").animate({
            bottom: "+0px"
        }, 500);
        $(".soft").stop().animate({
            bottom: "-300px"
        }, 500);
    });
 
    $(".mind").hover(function () {
        $(".mind").show();
        }, function () {
            $(".mind").hide();
    });
 
    $("#second").hover(function () {
        $(".soft").show();
        $(".soft").animate({
            bottom: "+0px"
        }, 500);
        $(".mind").stop().animate({
            bottom: "-300px"
        }, 500);
    });
 
    $(".soft").hover(function () {
        $(".soft").show();
    }, function () {
        $(".soft").hide();
    });
 
});

 

HTML:
<div class="mind">
    <center>
        <h1>Welcome !! Mindstick</h1>
        <p>mindstick software pvt company</p>
    </center>
</div>
<div class="soft">
    <center>
        <h1>Hello !! Software</h1>
        <p>mindstick software pvt company</p>
    </center>
</div>
 
<div class="ft">
    <ul>
        <li id="first">MindStick</li>
        <li id="second">Software
pvt ltd</li>
    </ul>
</div>
Anonymous User

Anonymous User

11-Mar-2015

Try this code:

$("#news").hover(function () {

            $("#first").animate({ bottom: '0' });

            $("#first").css("display","block");

        }, function () {

            $("#first").animate({ bottom: '-300px' });

            $("#first").css("display", "none");

        });

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy